<template>
	<view v-if="shiper" class="confirmAnOrder paddTopheder" id="index_three" style="padding: 0;">
		<view class="orderform">
			<u-cell-group :border="false">
				<u-cell title="订单备注" isLink url='/subPackages/order/orderNote/orderNote' :border="false">
					<text slot="value" class="u-slot-value" v-if="!shiper.moveHouse">请填写订单备注</text>
				<text slot="value" class="u-slot-value" v-else>需要搬运服务</text>
				</u-cell>
				<u-cell title="搬运服务" isLink :border="false" @click="toservice=true">
					<text slot="value" class="u-slot-value" v-if="shiper.moveHouseValue==''">
						请选择
					</text>
					<text slot="value" class="u-slot-value" v-else>
						{{shiper.moveHouseValue}}
					</text>
				</u-cell>
				<u-cell title="回单服务" isLink :border="false" @click="genderShow=true">
				
					<text slot="value" class="u-slot-value">
						{{genderlist[shiper.receiptType].name}}
					</text>
				</u-cell>
				<u-cell title="用车时间" v-if="shiper.shipmentTime" isLink :border="false" @click="pickerShow">
					<text slot="value" class="u-slot-value" v-if="shiper.shipmentTime==''">请选择用车时间</text>
				<text slot="value" class="u-slot-value" v-else>{{shiper.shipmentTime}}</text>
				</u-cell>
				<u-cell v-if="shiper.shipmentTime" title="结束时间" isLink :border="false" @click="pickerShowEnd">
					<text slot="value" class="u-slot-value"v-if="shiper.unloadTime==''">请选择结束时间</text>
				<text slot="value" class="u-slot-value" v-else>{{shiper.unloadTime}}</text>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="invoiceform">
			<u-cell-group :border="false">
				<u-cell title="发票"  :value="
				shiper.invoiceType == '0' ?
				'无需发票' :(shiper.invoiceType=='1' ? '撮合-电子普票':'承运-专票服务')" isLink @click='openinvoice'>
				</u-cell>
				<u-cell title="加小费" :border="false" isLink @click='opentips'>
					<text slot="value" class="u-slot-value" v-if="shiper.gratuityAmount==''">加小费更容易接单</text>
				<text slot="value" class="u-slot-value" v-else>{{shiper.gratuityAmount}}元</text>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="driverform">
			<u-cell-group :border="false">
				<!-- 	<u-cell title="收藏的司机" isLink>
					<text slot="value" class="u-slot-value" @click="toShou=true">请选择</text>
				</u-cell> -->
				<u-cell title="跟单人" :border="false" @click="toPepo=true">
					<text slot="value" class="u-slot-value" v-if="shiper.followPerson==''">无</text>
					<text slot="value" class="u-slot-value" v-else>{{shiper.followPerson}}人</text>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="isAccept">
			<u-cell-group :border="false">
				<u-cell title="是否接受拼车" :border="false">
					<label slot="right-icon" class="radio">
						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkbox">
							<u-checkbox :customStyle="{marginBottom: '8px'}">
							</u-checkbox>
						</u-checkbox-group>
					</label>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="insurance">
			<u-cell-group :border="false">
				<u-cell title="货物保险 全程无忧" label='5元每份,勾选即享' :border="false">
					<label slot="right-icon" class="radio">
						<!-- <radio value="order.insuranceType" checked="true" /> -->
						<u-checkbox-group v-model="order2.insuranceType" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" :name="1" />
						</u-checkbox-group>
					</label>
				</u-cell>
			</u-cell-group>
		</view>

		<!-- 发票票的弹出框 -->
		<view class="invoice">
			<u-popup :show="modalshow" @close="modalshow = false" :round='10'>
				<view class="cell">
					<u-cell-group :border="false">
						<u-radio-group v-model="order2.invoiceType" placement="column" @change="groupChange">
							<u-cell title="请选择发票类型" :border="false" label='只有通过平台支付的费用才能开票'
								:titleStyle="{fontWeight:'600',fontSize:'36upx'}">

							</u-cell>
							<u-cell title="无需发票" :titleStyle="{fontWeight:'500',fontSize:'30upx'}">
								<label slot="right-icon" class="radio">
									<u-radio :name="0" />
								</label>
							</u-cell>
							<u-cell title="撮合-电子普票" :titleStyle="{fontWeight:'500',fontSize:'30upx'}">
								<label slot="right-icon" class="radio">
									<u-radio :name="1" />
								</label>
							</u-cell>
							<u-cell title="承运-专票服务" label='叫车后无法补开' :border="false"
								:titleStyle="{fontWeight:'500',fontSize:'30upx'}">
								<label slot="right-icon" class="radio">
									<u-radio :name="2" />
								</label>
							</u-cell>
						</u-radio-group>
					</u-cell-group>
				</view>
				<view class="button">
					<button type="primary" @click="confirmModal">确认</button>
				</view>
			</u-popup>
		</view>
		<!-- 小费弹出框 -->
		<view class='tips'>
			<u-popup :show="tipshow" @close="tipshow = false" :round='10'>
				<view class="title">请选择加小费金额</view>
				<view class="price">
					<view :class="diytips==item?'onepick':'one'" v-for="(item,index) in money"
						@click="choicemoey(item)">
						{{item}}<text class="yuan">元</text>
					</view>
				</view>
				<view class="input">
					<u-input type="digit" v-model='diytips' placeholder="其他金额请在此输入" placeholder-class="placeholderClass"
						:disabled='current==-1?false:true' />
				</view>
				<button @click="confirmTips" type="primary">确认</button>
			</u-popup>
		</view>
	<!-- 	<u-action-sheet @select='select' :actions="list" :round='10' @close='toShou=false' :cancelText="'取消'"
			:show="toShou"></u-action-sheet> -->
		<ch-picker ref="ChPicker" position="bottom" @confirmTime='confirmTime'>
		</ch-picker>
		<ch-picker ref="ChPickerEnd" :cont="1" position="bottom" @confirmTime='confirmTimeEnd'>
		</ch-picker>
		<u-picker :show="toPepo" @cancel='toPepo=false' :columns="Pepo" @confirm='confirmPepo'
			@colse='toPepo=false'></u-picker>
		<u-picker :show="toservice" :columns="serviceMood" @cancel='toPepo=false' @confirm='confirmService'
			@colse='toservice=false'></u-picker>

		<u-action-sheet class="actionSheet" round="20rpx" @select="selectClick" cancelText="取消" :actions="genderlist"
			:closeOnClickOverlay="true" :closeOnClickAction="true" :show="genderShow"
			@close="genderShow=false"></u-action-sheet>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				checked: true,
				modalshow: false,
				columns: [
					['有电梯—楼层费0元', '无电梯住1层—楼层费0元', '无电梯住1层—楼层费12元']
				],
				shiper:'',
				show: false,
				modalfloorshow: false,
				tipshow: false,
				toservice: false,
				current: -1,
				genderShow: false,
				TimeShow: 1,
				fattile:'无需发票',
				genderlist: [{
						name: '无',
						id: 0,
						fontSize: "30rpx",
						color: '#000',
					},
					{
						name: '回单拍照',
						id: 1,
						fontSize: "30rpx",
						color: '#000',
					},
					{
						name: '纸质回单',
						id: 2,
						fontSize: "30rpx",
						color: '#000',
					},
				],
				money: ['10', '20', '30'],
				diytips: null, //小费弹框输入金额
				order2: {
					invoiceType: 0, //发票类型	
					gratuity: 0, //小费
					amount: 0, //总金额
					insuranceType: [1], //保险
				},
				checkboxValue1: [],
				Pepo: [
					[1, 2, 3, 4, 5]
				],
				serviceMood: [
					['不要搬运', '搬运服务', '高端搬运服务(钢琴等贵重物品搬运)', '清洁服务', '托运服务(长途，短途货物运输往返)', '出租服务(叉车出租一类)']
				],
				carry: '',
				result: {},
				toPepo: false,
				list: [{
						name: '优先发给全部收藏司机',
						id: 0,
						fontSize: '15'
					},
					{
						name: '发给指定收藏司机',
						id: 1,
						fontSize: '15'
					},
					{
						name: '不使用收藏司机',
						id: 2,
						fontSize: '15'
					},
				],
				toShou: false
			};
		},
		methods: {
			...mapMutations('order', ['changeOder']),
			selectClick(e) {
				console.log(e)
				let data = {
					receiptType: e.id
				}
				this.changeOder(data)
			},
			confirmPepo(e) {
				let data = {
					followPerson: e.value[0]
				}
				this.changeOder(data)
				this.toPepo = false
			},
			confirmService(e) {
				let data 
				if(e.indexs[0]==0){
					 data = {
						moveHouseValue:e.value[0]
					}
				}else{
					data = {
						moveHouseValue:e.value[0]
					}
				}
				this.toservice = false
				this.changeOder(data)
			},
			pickerShow() {
				this.$refs.ChPicker.show()
			},
			confirmTime(e) {
				let data = {
					shipmentTime: e
				}
				this.$refs.ChPicker.hide()
				this.changeOder(data)
			},
			pickerShowEnd() {
				this.$refs.ChPickerEnd.show()
			},
			confirmTimeEnd(e) {
				let data = {
					unloadTime: e
				}
				this.$refs.ChPickerEnd.hide()
				this.changeOder(data)
			},

			// 发票弹出框
			openinvoice() {
				this.modalshow = true
				let data = {
					invoiceType: this.order.invoiceType
				}
			},
			//发票选中
			groupChange(val) {
				
				let data = {
					invoiceType: val
				}
				this.changeOder(data)
			},
			//确认选中
			confirmModal() {
				let data = {
					invoiceType: this.order2.invoiceType
				}
				this.modalshow = false
			},
			// 加小费弹出框
			opentips() {
				//this.order2.gratuity = this.order.gratuity
				this.diytips = this.order2.gratuity
				this.tipshow = true
			},
			choicemoey(item) {
				this.diytips = item
			},
			// 小费确认按钮
			confirmTips() {
				this.order2.gratuity = this.diytips - 0
				let data = {
					gratuityAmount: this.diytips - 0,
				}
				this.changeOder(data)
				this.tipshow = false
			},
			//拼车
			checkbox(e) {
				let cont = true
				if(e.length>0){
					cont=true
				}else{
					cont=false
				}
				let data = {
					 isWhole: cont
				}
				this.changeOder(data)
			},
			//保险change事件
			checkboxChange(n) {
				this.order.insuranceType = n
				if (n) {
					let data = {
						insuranceAmount: 5
					}
					this.changeOder(data)
				}


			},

		},
		mounted() {
		this.shiper = this.order.shipperOrderDetailDto
		if(this.shiper.isWhole){
			this.checkboxValue1=[]
			this.checkboxValue1.push('')
		}
		if(this.shiper.insuranceAmount){
			this.order2.insuranceType=[]
			this.order2.insuranceType.push(1)
		}
		
		},
		computed: {
			...mapState({
				order: state => state.order.order,
			})
		},
	}
</script>

<style lang="scss" scoped>
	$upx20: 20upx;
	$borderR: 12upx;

	.confirmAnOrder {
		background-color: #F7F9FB;
		width: 100%;
		overflow: scroll;

		.bg {
			background-color: #00A0E9;
			width: 100%;
			height: 100upx;

		}

		.chexing {
			border-radius: 8upx;
			margin: 0upx $upx20;
			position: relative;
			top: -80upx;
		}

		.jichu {}

		.orderform,
		.invoiceform,
		.driverform,
		.insurance,
		.isAccept {
			border-radius: $borderR;
			width: 95%;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20upx 20upx 20upx 20upx;
			margin: 20upx $upx20;
			font-weight: 600;
			margin-left: 2.5%;

			.u-slot-value {
				font-weight: 100;
				font-size: 26upx;

			}

			.colorblack {
				color: black;
				font-weight: 600;
			}
		}

		.footer {
			width: 100%;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			.text {
				margin-top: 40upx;
				display: flex;
				justify-content: center;

				.money {
					font-size: 64upx;
					font-weight: 600;
					display: flex;

					.danwei {
						margin-left: 12upx;
						margin-top: 30upx;
						font-size: 16upx;
						font-weight: 500;
						display: flex;
						align-items: center;
					}
				}


			}

			button {
				width: 90%;
				margin: 30upx;
			}
		}

		.invoice {
			.cell {
				margin: 20upx 10upx 0;

				.u-slot-value {
					font-size: 20upx;
					font-weight: 200;
				}

			}

			.button {
				width: 100%;
				margin: 20upx auto;
				border-top: 1upx solid rgba(200, 200, 200, 0.15);

				button {
					width: 90%;
					margin-top: 20upx;

				}
			}
		}

		.tips {
			width: 100%;
			background-color: #fff;
			margin: 20upx 10upx 0;

			.title {
				font-size: 36upx;
				font-weight: 700;
				margin: 61upx 391upx 61upx 65upx;

				width: 100%;
			}

			.price {
				width: 90%;
				display: flex;
				justify-content: space-around;
				margin: 0 auto;

				.one {
					width: 200upx;
					height: 82upx;
					line-height: 82upx;
					font-size: 34upx;
					font-weight: 500;
					text-align: center;
					border-radius: 20upx;
					border: 1upx solid #E7E7E8;

					.yuan {
						font-size: 20upx;
						font-weight: 500;
						text-align: center;
					}
				}

				.onepick {
					width: 200upx;
					height: 82upx;
					line-height: 82upx;
					font-size: 34upx;
					font-weight: 500;
					text-align: center;
					border-radius: 20upx;
					color: #02A7F0;
					background-color: #F1F9FF;
					border: 1upx solid #02A7F0;

					.yuan {
						font-size: 20upx;
						font-weight: 500;
						text-align: center;
					}
				}
			}

			.input {

				width: 90%;
				margin: 0 auto;
				margin-bottom: 62upx;
				margin-top: 40upx;
				background-color: #F7F9FB;
				border-radius: 20upx;


				// input::-webkit-placeholder {
				//    line-height: 82upx;
				// }
				.placeholderClass {
					line-height: 82upx;
					text-align: center;

				}
			}

			button {
				width: 90%;
				margin: 0 auto;
				margin-bottom: 56upx;
			}
		}
	}

	.u-slot-value {
		font-size: 20upx;
		font-weight: 200;
		color: #333;
	}
</style>